
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>JavaScript <span class="color_h1">for 循环</span>
</h1>
<hr/>
<p class="intro">循环可以将代码块执行指定的次数。</p>
<hr/>
<h2>JavaScript 循环</h2>
<p>如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。</p>
<p>我们可以这样输出数组的值：</p>
<div class="example">
<h2 class="example">一般写法：</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">0</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">; 
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">1</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">; 
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">2</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">; 
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">3</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">; 
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">4</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">; 
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-number">5</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></div>
</div>
<br/><h2 class="example">使用for循环</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">;</span><span class="hl-identifier">i</span><span class="hl-code">&lt;</span><span class="hl-identifier">cars</span><span class="hl-code">.</span><span class="hl-identifier">length</span><span class="hl-code">;</span><span class="hl-identifier">i</span><span class="hl-code">++</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>不同类型的循环</h2>
<p>JavaScript 支持不同类型的循环：</p>
<ul>
<li><strong>for</strong> - 循环代码块一定的次数</li>
<li><strong>for/in</strong> - 循环遍历对象的属性</li>
<li><strong>while</strong> - 当指定的条件为 true 时循环指定的代码块</li>
<li><strong>do/while</strong> - 同样当指定的条件为 true 时循环指定的代码块</li>
</ul>
<hr/>
<h2>For 循环</h2>
<p>for 循环是您在希望创建循环时常会用到的工具。
</p>
<p>下面是 for 循环的语法：</p>
<div class="code"><div>

for (<i>语句 
	1</i>;<i> 语句 2</i>;<i> 语句 3</i>)<br/>

{<br/><i>    被执行的代码块</i><br/>

}<br/>
</div></div>
<p><strong>语句 1</strong> （代码块）开始前执行</p>
<p><strong>语句 2</strong> 定义运行循环（代码块）的条件</p>
<p><strong>语句 3</strong> 在循环（代码块）已被执行之后执行</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">&lt;</span><span class="hl-number">5</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">++</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">x</span><span class="hl-code">=</span><span class="hl-identifier">x</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">该数字为 </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">i</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>从上面的例子中，您可以看到：</p>
<p>Statement 1 在循环开始之前设置变量 (var i=0)。</p>
<p>Statement 2 定义循环运行的条件（i 必须小于 5）。</p>
<p>Statement 3 在每次代码块已被执行后增加一个值 (i++)。</p>
<hr/>
<h2>语句 1</h2>
<p>通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。</p>
<p>语句 1 是可选的，也就是说不使用语句 1 也可以。</p>
<p>您可以在语句 1 中初始化任意（或者多个）值：</p>
<div class="example">
<h2 class="example">实例:</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-identifier">len</span><span class="hl-code">=</span><span class="hl-identifier">cars</span><span class="hl-code">.</span><span class="hl-identifier">length</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">&lt;</span><span class="hl-identifier">len</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">++</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>同时您还可以省略语句 1（比如在循环开始前已经设置了值时）：</p>
<div class="example">
<h2 class="example">实例:</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code">=</span><span class="hl-number">2</span><span class="hl-code">,</span><span class="hl-identifier">len</span><span class="hl-code">=</span><span class="hl-identifier">cars</span><span class="hl-code">.</span><span class="hl-identifier">length</span><span class="hl-code">;
</span><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">&lt;</span><span class="hl-identifier">len</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">++</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>语句 2</h2>
<p>通常语句 2 用于评估初始变量的条件。</p>
<p>语句 2 同样是可选的。</p>
<p>如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。</p>
<table class="lamp"><tr>
<th width="34"><img alt="lamp" decoding="async" height="32" src="/images/lamp.jpg" width="32"/></th>
<td>
如果您省略了语句 2，那么必须在循环内提供 <em>break</em>。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。
</td>
</tr></table>
<br/><hr/>
<h2>语句 3</h2>
<p>通常语句 3 会增加初始变量的值。</p>
<p>语句 3 也是可选的。</p>
<p>语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。</p>
<p>语句 3 也可以省略（比如当循环内部有相应的代码时）：</p>
<div class="example">
<h2 class="example">实例:</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-identifier">len</span><span class="hl-code">=</span><span class="hl-identifier">cars</span><span class="hl-code">.</span><span class="hl-identifier">length</span><span class="hl-code">;
</span><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">&lt;</span><span class="hl-identifier">len</span><span class="hl-code">; </span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-identifier">cars</span><span class="hl-brackets">[</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">&lt;br&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
    </span><span class="hl-identifier">i</span><span class="hl-code">++;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>For/In 循环</h2>
<p>JavaScript for/in 语句循环遍历对象的属性：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person</span><span class="hl-code">=</span><span class="hl-brackets">{</span><span class="hl-identifier">fname</span><span class="hl-code">:</span><span class="hl-quotes">"</span><span class="hl-string">Bill</span><span class="hl-quotes">"</span><span class="hl-code">,</span><span class="hl-identifier">lname</span><span class="hl-code">:</span><span class="hl-quotes">"</span><span class="hl-string">Gates</span><span class="hl-quotes">"</span><span class="hl-code">,</span><span class="hl-identifier">age</span><span class="hl-code">:</span><span class="hl-number">56</span><span class="hl-brackets">}</span><span class="hl-code">; 
 
</span><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">x</span><span class="hl-code"> </span><span class="hl-reserved">in</span><span class="hl-code"> </span><span class="hl-identifier">person</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> x 为属性名</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">txt</span><span class="hl-code">=</span><span class="hl-identifier">txt</span><span class="hl-code"> + </span><span class="hl-identifier">person</span><span class="hl-brackets">[</span><span class="hl-identifier">x</span><span class="hl-brackets">]</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。</p>
<hr/>
<h2>While 循环</h2>
<p>我们将在下一章为您讲解 while 循环和 do/while 循环。</p> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    